<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>自助售货管理后台</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
<style>
  .form-control{
    width: 200px;
  }
</style>
</head>
<body>
<div class="content-wrapper">
  <div class="content-header ">
    <div class="content-header-left mb-2">
      <h3 class="content-header-title mb-0">库存</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <div class="searchbox">


          <form class="form-inline">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入需要查询的商品名称" id="productName">
            </div>
            

			  <div class="form-group">
              <button type="button" class="btn btn-primary" onclick="seachProductName()">查询</button>
            </div>
          </form>
        </div>
        <div class="funcbtn clearfix">
          <div class="pull-left"><a class="btn btn-info" href="采购商品列表.html">采购商品</a></div>
        </div>
        <div class="tablebox1">
          <table class="table">
            <thead>
				      <tr>
                  <th>库存id</th>
                  <th>商品id</th>
                  <th>商品名称</th>
                  <th>数量</th>
                  <th>库存创建时间</th>
                  <th>库存修改时间</th>
              </tr>
            </thead>
            <tbody id="showinventory">

            </tbody>
          </table>
 
          <div class="page clearfix">
            <div class="pull-left">共 <span id="totalCount"></span>条记录 第 <span id="pageNum"></span> / <span id="pages"></span> 页</div>
            <div class="pull-right">
              <nav aria-label="..." class="pull-left">
                <ul class="pagination" id="pagination">
                  <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                </ul>
              </nav>
              <div class="pull-left p-r-20  p-l-20">
                <select class="form-control" id="pageSizeSelect" disabled>
                  <option value="4">4条每页</option>
                </select>
              </div>
              <div class="pull-left">跳至<input type="text" value="1" class="form-control" id="jumpPageInput">页</div>
            </div>
          </div>
					</div>
		  </div>
      </div>
    </div>
  </div>
</div>
	

	


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script> 
<script src="app-assets/laydate/laydate.js" type="text/javascript"></script> 

</body>
</html>
<script>
  $(function(){
    console.log(window.sessionStorage.getItem("empName"))
            var loginMessage = window.sessionStorage.getItem("empName")
            if(loginMessage==null){
                alert("请先登录")
                window.location.href="./index.html"
            }
    onloadOk(1,"");
  })
var productName = "";
  function onloadOk(pageNum,productName){
    $.ajax({
      type:"get",
      url:"http://localhost:18081/inventory/selectAllInventory",
      data:{
        pageNum:pageNum,
        productName:productName
      },
      dataType:"json",
      success:function(data){
        console.log(data)
        $('#showinventory').empty();
        $('#totalCount').html(data.data.total);
            $('#pageNum').html(data.data.pageNum);
            $('#pages').html(data.data.pages);
        var message = data.data.list;
        console.log(message)

        message.forEach(item => {
          var str = `
            <tr>
              <td>${item.inventoryId}</td>
              <td>${item.productId}</td>
              <td>${item.productName}</td>
              <td>${item.quantity}</td>
              <td>${item.createdAt}</td>
              <td>${item.updatedAt}</td>
            </tr>
          `
          $("#showinventory").append(str);
        });
        updatePagination(data.data.pageNum, data.data.pages);
      }
    })
  }



  function updatePagination(currentPage, totalPages) {
    $('#pagination').empty();

    // 添加上一页按钮
    if (currentPage > 1) {
        $('#pagination').append('<li><a href="#" onclick="changePage(' + (currentPage - 1) + ')"><span aria-hidden="true">«</span></a></li>');
    } else {
        $('#pagination').append('<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>');
    }

    // 添加页码按钮
    for (let i = 1; i <= totalPages; i++) {
        if (i === currentPage) {
            $('#pagination').append('<li class="active"><a href="#">' + i + ' <span class="sr-only">(current)</span></a></li>');
        } else {
            $('#pagination').append('<li><a href="#" onclick="changePage(' + i + ')">' + i + '</a></li>');
        }
    }

    // 添加下一页按钮
    if (currentPage < totalPages) {
        $('#pagination').append('<li><a href="#" onclick="changePage(' + (currentPage + 1) + ')"><span aria-hidden="true">»</span></a></li>');
    } else {
        $('#pagination').append('<li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>');
    }
}



function changePage(pageNum) {
  event.preventDefault();
    onloadOk(pageNum,productName);
}

// 处理跳转到指定页
$('#jumpPageInput').change(function() {
    const jumpPage = $(this).val();
    const totalPages = $('#pages').text();
    if (jumpPage > 0 && jumpPage <= totalPages) {
        onloadOk(jumpPage,productName);
    } else {
        alert('请输入有效的页码');
    }
});

function seachProductName(){
  event.preventDefault();
  productName = $("#productName").val(); 
  onloadOk(1,productName);
}
</script>